<template>
    <div id="body-padding">
        <p id="p">最新日记</p>
        <div  id="title">

            <div>
                <span v-show="show1" class="fa fa-long-arrow-down">下拉刷新</span>
                <span v-show="show2" class="fa fa-long-arrow-up">正在刷新</span>
            </div>
            <span v-show="show3" >
                <span class="fa fa-spinner fa-spin"></span>正在刷新
            </span>
        </div>
        
        <!--<ScrollView :height="500" @didScroll="didScroll">-->
            <div v-for="h in home" class="home" v-if="h.diaryID.open">
                <img 
                    :src="'http://localhost:3000'+(h.userID.avatar?h.userID.avatar:'/img/avatar/mr.jpg')"
                >
                <div class="home1">
                    <router-link :to="'/new/day/'+h.userID._id">
                        <b>{{h.userID.name}}</b>
                    </router-link>
                    <router-link to="">
                        《{{h.diaryID.name}}》
                    </router-link>
                    <span>{{h.sj}}</span>
                    <!--<pre>{{h.content}}</pre>-->
                    <div v-html="h.content" id="content"></div>
                    <img :src="'http://localhost:3000'+h.img"  v-if="h.img">
                    <br>
                    <router-link :to="'/reply/'+h._id" class="replys">
                        <span class="fa fa-comments-o"></span>
                        <span v-show="h.reply.length">{{h.reply.length}}</span>
                        回复
                    </router-link>
                </div>
            </div>
        <!--</ScrollView>-->
        <div id="gengduo" v-show="data.over">
            没有更多了
        </div>
    </div>
</template>

<script>
import ScrollView from '../components/ScrollView.vue'
import {Swiper,Divider} from 'vux';
import {mapState} from "vuex";
export default {
    data:function(){
        return {
            home:[],
            show1:false,
            show2:false,
            show3:false,
            data:{
                to:0,
                top:0,
                being:true,
                over:false,
            }
        }
    },
    components:{
        Swiper,
        ScrollView,
    },
    computed:{
        
    },
    methods:{
        didScroll(e){
            if(e<-0.03&&-0.06<e){
                this.show1 =true;
            }else{
                this.show1 =false;
            }
            if(-0.06>e&&(!this.show3)){
                this.show3 =true;
                setTimeout(()=> {
                    this.home2();
                }, 3000);
            }
            if(e>0.8){
                console.log(e);
            }
        },
        home2(){
            var num = 10;
            var page = this.home.length/num;
             this.http.get("/diary/home",{params:{page:page,num:num}})
            .then(res=>{
                this.show3 =false;
                this.data.being =true;
                this.home = this.home.concat(res.data.data);
                for(var i=0;i<this.home.length; i++){
                    this.home[i].content =  this.home[i].content.replace(/\n/g,'<br>')
                }
                // this.home= this.home.forEach((e)=> {
                //     e.content.replace(/\n/g,'<br>')
                // });
                console.log(res.data.data);
                if(res.data.data.length<num){
                    this.data.being =false;
                    this.data.over =true;
                }

            })
        },
        reply(e){
            window.location.href = "#/reply/"+e;
        },
        handleScroll () {
            this.data.to = window.scrollY;
            this.data.top = document.body.clientHeight-window.screen.availHeight;
            if((this.data.top<this.data.to+100)&&this.data.being){
                this.home2();
                this.data.being =false;
            }
        },
        Scroll () {

        }
    },
    mounted:function(){
        this.home2();
        // console.log("com组件mounted");
        this.$store.dispatch("word");
        window.addEventListener('scroll', this.handleScroll);
    },
    activated(){
        // console.log("com组件activated");
        this.$store.dispatch("word");
        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed:function(){
        console.log("com组件被删除了");
    },
    deactivated(){
        window.removeEventListener('scroll', this.handleScroll);
    }
//     data () {
//   return {
//     scrolled: false
//   };
// },
// methods: {
//   handleScroll () {
//     this.scrolled = window.scrollY > 0;
//   }
// },
// ready () {
//   window.addEventListener('scroll', this.handleScroll);
// }
}
</script>

<style scoped>
    .home{
        display: flex;
        border-bottom: solid 1px #ccc;
        padding: 8px 0;
    }
    .home>img{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .home1 img{
        max-width: 100%;
    }
    .home>div{
        padding: 1px 8px;
    }
    a{
        color: black;
    }
    #title{
        text-align: center;
    }
    #title>div{
        position: absolute;
        width: 90%;
    }
    .reply{
        border: solid 1px #eee;
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 3px;
    }
    .replys{
        font-size: 10px;
        border: solid 1px #eee;
        padding: 4px 8px;
    }
    #gengduo{
        text-align: center;
        padding: 20px;
        color: #19A97B;
        background-color: rgba(0, 204, 51, 0.1);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;

    }
    #textarea{
        /*border: none;*/
        background-color: white;
    }
    #content{
        width: 70vw;
        word-break: break-all;
        margin: 8px 0;
    }
</style>